﻿@page "/chart/area-empty"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates an area series with empty points. Data points with null points are shown here.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render an area series with empty points. Also, the legend is enabled with the shape of the series type.</p>
    <p>More information about the empty points can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/working-with-data/#empty-points'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Inflation Rate" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="2" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Rates (in Million)" LabelFormat="{value}M">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="France" XName="Period" Width="2"
                         Opacity="0.5" YName="FR_InflationRate" Type="ChartSeriesType.Area">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="US" XName="Period" Width="2"
                         Opacity="0.5" YName="US_InflationRate" Type="ChartSeriesType.Area">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<AreaEmptyChartData> ChartPoints { get; set; } = new List<AreaEmptyChartData>
    {
        new AreaEmptyChartData { Period = "2002", FR_InflationRate = 2  , US_InflationRate = 2.2 },
        new AreaEmptyChartData { Period = "2003", FR_InflationRate = 1.7, US_InflationRate = 3.4 },
        new AreaEmptyChartData { Period = "2004", FR_InflationRate = 1.8, US_InflationRate = 2.8 },
        new AreaEmptyChartData { Period = "2005", FR_InflationRate = 2.1 },
        new AreaEmptyChartData { Period = "2006", FR_InflationRate = 2.3 },
        new AreaEmptyChartData { Period = "2007", FR_InflationRate = 1.7, US_InflationRate = 2.5 },
        new AreaEmptyChartData { Period = "2008", FR_InflationRate = 1.5, US_InflationRate = 2.9 },
        new AreaEmptyChartData { Period = "2009", FR_InflationRate = 1.8, US_InflationRate = 3.8 },
        new AreaEmptyChartData { Period = "2010", FR_InflationRate = 2, US_InflationRate = 1.4 },
        new AreaEmptyChartData { Period = "2011", FR_InflationRate = 3.1, US_InflationRate = 3.1 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class AreaEmptyChartData
    {
        public string Period { get; set; }
        public double FR_InflationRate { get; set; }
        public double US_InflationRate { get; set; }
    }

}
